<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .xx p{
            display: none;
        }

        .active{
            color: red;
        }

        .xx .show{
            display: block;
        }

    </style>
</head>
<body>

    <div class="xx">
        <div class="xx-td">
            <button class="active">1</button>
            <button>2</button>
            <button>3</button>
        </div>

        <div class="xx-bd">
            <p class="show">111</p>
            <p>222</p>
            <p>223</p>

        </div>
    </div>

    <script>

        // 构造函数
        function Tab(ele,type){
            // 获取标签
            this.ele = document.querySelector(ele);
            this.oBtns = this.ele.querySelectorAll('button');
            this.oPs = this.ele.querySelectorAll('p');

            // 设置绑定事件类型
            this.type = type || 'click'

            this.init();
        }

        // Tab.prototype.init = function(){

        //     // 循环绑定事件
        //     for( let i = 0; i < this.oBtns.length ; i++){
        //         this.oBtns[i].addEventListener(this.type , () => {
        //             // 默认移除
        //             for( let j = 0 ; j < this.oBtns.length; j++){
        //                 this.oBtns[j].classList.remove('active');
        //                 this.oPs[j].classList.remove('show')
        //             }

        //             this.oBtns[i].classList.add('active');
        //             this.oPs[i].classList.add('show');




        //         })


        //     }


        // }


        // Tab.prototype.init = function(){

        //     // 循环绑定事件
        //     for( let i = 0; i < this.oBtns.length ; i++){
        //         this.oBtns[i].addEventListener(this.type , function() {
        //             // 默认移除
        //             for( let j = 0 ; j < this.oBtns.length; j++){
        //                 this.oBtns[j].classList.remove('active');
        //                 this.oPs[j].classList.remove('show')
        //             }

        //             this.oBtns[i].classList.add('active');
        //             this.oPs[i].classList.add('show');




        //         }.bind(this))


        //     }


        //     }


        Tab.prototype.init = function(){

            // 循环绑定事件
            for( let i = 0; i < this.oBtns.length ; i++){
                const _this = this;
                this.oBtns[i].addEventListener(this.type , function() {
                    // 默认移除
                    for( let j = 0 ; j < _this.oBtns.length; j++){
                        _this.oBtns[j].classList.remove('active');
                        _this.oPs[j].classList.remove('show')
                    }

                    _this.oBtns[i].classList.add('active');
                    _this.oPs[i].classList.add('show');




                })


            }


            }





        const t1 = new Tab('.xx');



    </script>
    
</body>
</html>